<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div ref="container" style="width: 100%; height: 800px"></div>
    <div class="dome1">
      <div class="num">128</div>
      <div class="content">
        <div>
          <span style="display: inline-block; width: 60px">地点</span>
          <span class="q-ml-lg">北京</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">电站数</span>
          <span class="q-ml-lg">73</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">开工率</span>
          <span class="q-ml-lg">50%</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">装机</span>
          <span class="q-ml-lg">254KW</span>
        </div>
      </div>
    </div>
    <div class="dome1" style="top:75%;left: 57%;">
      <div class="num">54</div>
      <div class="content">
        <div>
          <span style="display: inline-block; width: 60px">地点</span>
          <span class="q-ml-lg">济南</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">电站数</span>
          <span class="q-ml-lg">73</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">开工率</span>
          <span class="q-ml-lg">50%</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">装机</span>
          <span class="q-ml-lg">254KW</span>
        </div>
      </div>
    </div>
    <div class="dome1" style="top:43%;left: 51%;">
      <div class="num">73</div>
      <div class="content">
        <div>
          <span style="display: inline-block; width: 60px">地点</span>
          <span class="q-ml-lg">张家口</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">电站数</span>
          <span class="q-ml-lg">73</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">开工率</span>
          <span class="q-ml-lg">50%</span>
        </div>
        <div>
          <span style="display: inline-block; width: 60px">装机</span>
          <span class="q-ml-lg">254KW</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "RealTimeState2",
  components: {},
  data() {
    return {};
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    // 初始化echarts实例
    initEcharts() {
      var map = new BMapGL.Map(this.$refs.container); // 创建地图实例
      var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
      map.centerAndZoom(point, 7);
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
      map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式
    },
  },
});
</script>

<style lang="scss" scoped>
.dome1 {
  position: absolute;
  top: 50%;
  left: 55%;
  z-index: 999;
  display: flex;
  .num {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #118e11;
    color: white;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 1px 1px 5px grey, -1px -1px 5px grey;
    cursor: pointer;
  }
  .content {
    display: none;
    padding: 10px;
    border-radius: 4px;
    color: white;
    background: rgba(0, 0, 0, 0.7);
    margin-left: 20px;
    margin-top: -20px;
  }
}
.dome1:hover .content {
  display: block!important;
}
</style>
